// import Discover from "pages/discover"
// import Playlist from "pages/discover/playlist"
// import Toplist from "pages/discover/toplist"
// import Friend from "pages/friend"
// import Login from "pages/login"
// import Mine from "pages/mine"
// import Page404 from "pages/page404"
import React, { lazy } from "react"
import { Navigate } from "react-router-dom"

let Discover = lazy(() => import("../pages/discover"))
let Playlist = lazy(() => import("../pages/discover/playlist"))
let Toplist = lazy(() => import("../pages/discover/toplist"))
let Login = lazy(() => import("../pages/login"))
let Mine = lazy(() => import("../pages/mine"))
let Page404 = lazy(() => import("../pages/page404"))
let Friend = lazy(() => import("../pages/friend"))   


type route = {
    path: string,
    element: React.ReactNode
}

type Iroute = route & {
    children?: Array<route>
}

export type Iroutes = Array<Iroute>

let routes: Iroutes = [
    {
        path: '/login',
        element: <Login />
    },
    {
        path: "/mine/:id",
        element: <Mine />,
    },
    {
        path: "/discover",
        element: <Navigate to="/discover/toplist" />
    },
    {
        path: "/discover",
        element: <Discover />,
        children: [
            {
                path: "playlist",
                element: <Playlist />
            },
            {
                path: "toplist",
                element: <Toplist />
            }
        ]
    },

    {
        path: "/friend",
        element: <Friend />
    },
    {
        path: "*",
        element: <Page404 />
    }
]

export default routes;